<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<title>用户</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="certificate/bootstrap.css" />
<script type="text/javascript" src="certificate/jquery.min.js"></script>
<c:set var="title" value="认证中心" scope="request" />
<jsp:include page="/head.jsp" />
		<jsp:include page="/head.jsp" />
<style type="text/css">
#imgPreview {
 width: 40%;
 height: 30px;
 margin: 10px auto 0px auto;
 border: 1px solid white;
 text-align: center;
}
#prompt3 {
 width: 100%;
 height: 180px;
 text-align: center;
  border: 1px solid white;
 position: relative;
}
#imgSpan {
 position: absolute;
 top: 2px;
 left: 2px;
}
.filepath {
 width: 50%;
 height: 50%;
 opacity: 0;
}
#img3 {
 height: 80px;
 width: 80px;
 display: none;
}

tr {
				height: 45px;
			}
			
			.radio-inline {
				width: 30px;
			}

</style>


</head>
<body>
<c:import url="/header.do?full=1" />

		<div class="col-md-10 news-add">
			</div>
			<h1 align="center">欢迎来到报考界面</h1>
	<hr />
	<form action="/certificate/certificate-zhifubao.do" name="form1" method="post" style="text-align: center; color: black" >
			<table align="center" bgcolor=aliceblue style="position: relative;margin: auto;">
				<tr>
					<td  style="padding-right:30px"><tt>姓&nbsp;&nbsp;名:</tt></td>
					<td  style="padding-right:30px"><input type="text" name="xingming" class="form-control" id="exampleInputEmail1" placeholder="请输入您的真实姓名" required="required" /></td>

					<td>寸照：</td>
					<td>
						<div id="imgPreview">
							<div id="prompt3">
								<span id="imgSpan"> 
									<button type="button" class="btn btn-danger" id="test1">上传图片</button>  									
							</span> <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
								<!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
							</div>
							<img src="#" id="img3" />
						</div>

					</td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>性&nbsp;&nbsp;别:</tt></td>
					<td>男<input type="radio" name="sex" value="nan" class="radio-inline" checked /> 女 <input type="radio" name="sex" class="radio-inline" value="nv" />
					</td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>身份证号:</tt></td>
					<td><input type="text" class="form-control" id="exampleInputEmail1" name="card" placeholder="请输入您的身份证号" required="required" /></td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>出生日期:</tt></td>
					<td><input type="date" name="brithdate" class="form-control" id="exampleInputEmail1"/></td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>手机号码:</tt></td>
					<td ><input type="tel" name="telphone" class="form-control" id="exampleInputEmail1" maxlength="11" placeholder="请输入您的手机号码" /></td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>家庭住址:</tt></td>
					<td><input type="text" name="address" class="form-control" id="exampleInputEmail1" placeholder="请输入您的家庭住址" /></td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>考试内容：</tt></td>
					<td>
						<select name="select1" class="form-control">
							<option value="0">请选择考试内容</option>
							<option value="1">美甲</option>
							<option value="2">美睫</option>
							<option value="3">纹绣</option>
						</select>
					</td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>鉴定级别：</tt></td>
					<td>
						<select name="select2" class="form-control">
							<option value="0">请选择鉴定级别</option>
							<option value="1">一级鉴定</option>
							<option value="2">二级鉴定</option>
							<option value="3">三级鉴定</option>
						</select>
					</td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>订单名称：</tt></td>
					<td><input type="text" name="q2" class="form-control" id="exampleInputEmail1" /></td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>付款金额：</tt></td>
					<td><input type="text" name="q3" class="form-control" id="exampleInputEmail1" /></td>
				</tr>

				<tr>
					<td  style="padding-right:30px"><tt>商品描述：</tt></td>
					<td><input type="text" name="q4" value="美容考试报名费" readonly="readonly" class="form-control" id="exampleInputEmail1" /></td>
				</tr>
				<tr>					
					<td colspan="2" style="text-align: right;"><button name="btn1" type="submit" class="btn btn-success">确定报考</button></td>
				</tr>

			</table>
		</form>




	<script type="text/javascript" src="photo-upload.js"></script>
	
	
	<jsp:include page="/footer.jsp" />


</body>
<script type="text/javascript">
	window.onload = function() {
		var form = document.forms.form1;
		var select1 = form.select1;
		var select2 = form.select2;
		var btn = form.btn1;
		btn.addEventListener("click", function() {
			if (select1.value == '0') {
				select1.setCustomValidity("请选择");
			} else {
				select1.setCustomValidity("");
			}
			if (select2.value == '0') {
				select2.setCustomValidity("请选择");
			} else {
				select2.setCustomValidity("");
			}
		});
		select1.addEventListener("change", function() {
			if (select1.value == '0') {
				form.q3.value = '';
				form.q2.value = '';
			} else {
				if (select1.value == '1' && select2.value == '1') {
					form.q3.value = '60';
					form.q2.value = '美甲一级鉴定报名费';
				} else if (select1.value == '1' && select2.value == '2') {
					form.q3.value = '80';
					form.q2.value = '美甲二级鉴定报名费';
				} else if (select1.value == '1' && select2.value == '3') {
					form.q3.value = '100';
					form.q2.value = '美甲三级鉴定报名费';
				} else if (select1.value == '2' && select2.value == '1') {
					form.q3.value = '60';
					form.q2.value = '美睫一级鉴定报名费';
				} else if (select1.value == '2' && select2.value == '2') {
					form.q3.value = '80';
					form.q2.value = '美睫二级鉴定报名费';
				} else if (select1.value == '2' && select2.value == '3') {
					form.q3.value = '100';
					form.q2.value = '美睫三级鉴定报名费';
				} else if (select1.value == '3' && select2.value == '1') {
					form.q3.value = '60';
					form.q2.value = '纹绣一级鉴定报名费';
				} else if (select1.value == '3' && select2.value == '2') {
					form.q3.value = '80';
					form.q2.value = '纹绣二级鉴定报名费';
				} else if (select1.value == '3' && select2.value == '3') {
					form.q3.value = '100';
					form.q2.value = '纹绣三级鉴定报名费';
				}
			}

		});
		select2.addEventListener("change", function() {
			if (select2.value == '0') {
				form.q3.value = '';
				form.q2.value = '';
			} else {
				if (select1.value == '1' && select2.value == '1') {
					form.q3.value = '60';
					form.q2.value = '美甲一级鉴定报名费';
				} else if (select1.value == '1' && select2.value == '2') {
					form.q3.value = '80';
					form.q2.value = '美甲二级鉴定报名费';
				} else if (select1.value == '1' && select2.value == '3') {
					form.q3.value = '100';
					form.q2.value = '美甲三级鉴定报名费';
				} else if (select1.value == '2' && select2.value == '1') {
					form.q3.value = '60';
					form.q2.value = '美睫一级鉴定报名费';
				} else if (select1.value == '2' && select2.value == '2') {
					form.q3.value = '80';
					form.q2.value = '美睫二级鉴定报名费';
				} else if (select1.value == '2' && select2.value == '3') {
					form.q3.value = '100';
					form.q2.value = '美睫三级鉴定报名费';
				} else if (select1.value == '3' && select2.value == '1') {
					form.q3.value = '60';
					form.q2.value = '纹绣一级鉴定报名费';
				} else if (select1.value == '3' && select2.value == '2') {
					form.q3.value = '80';
					form.q2.value = '纹绣二级鉴定报名费';
				} else if (select1.value == '3' && select2.value == '3') {
					form.q3.value = '100';
					form.q2.value = '纹绣三级鉴定报名费';
				}
			}

		});
	}

	function changepic() {
		 $("#prompt3").css("display", "none");
		 var reads = new FileReader();
		 f = document.getElementById('file').files[0];
		 reads.readAsDataURL(f);
		 reads.onload = function(e) {
		 document.getElementById('img3').src = this.result;
		 $("#img3").css("display", "block");
		 };
		}
	
</script>
</html>